<template>
	<view class="category-container">
		<view class="category-header">
			<view class="back-btn" @tap="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="category-title">{{categoryName}}</view>
			<view class="placeholder"></view>
		</view>
		
		<!-- 食物列表 -->
		<view class="food-list" v-if="foodList.length > 0">
			<view 
				class="food-item" 
				v-for="(item, index) in foodList" 
				:key="index"
				@tap="viewFoodDetail(item)"
			>
				<image :src="item.image || '/static/images/placeholder.png'" mode="aspectFill" class="food-image"></image>
				<view class="food-info">
					<view class="food-name">{{item.name}}</view>
					<view class="food-nutrition">
						<text class="nutrition-item">{{item.calories}}kcal/{{item.unit}}</text>
					</view>
					<view class="food-nutrition">
						<text class="nutrition-item">碳水{{item.carbs}}g</text>
						<text class="nutrition-item">蛋白质{{item.protein}}g</text>
						<text class="nutrition-item">脂肪{{item.fat}}g</text>
					</view>
				</view>
				<view class="food-action">
					<view class="add-btn" @tap.stop="addFood(item)">
						<text class="iconfont icon-add"></text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image src="/static/images/placeholder.png" mode="aspectFit" class="empty-image"></image>
			<view class="empty-text">该分类暂无食物</view>
		</view>
		
		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore && foodList.length > 0">
			<text @tap="loadMore">加载更多</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { getFoodByCategory } from '@/common/api/diet.js'
	
	// 分类ID
	const categoryId = ref(0)
	// 分类名称
	const categoryName = ref('')
	// 食物列表
	const foodList = ref([])
	// 是否有更多
	const hasMore = ref(false)
	// 页码
	const page = ref(1)
	// 每页数量
	const pageSize = ref(10)
	
	// 获取URL参数
	onMounted(() => {
		const query = uni.getSystemInfoSync().platform === 'mp-weixin' ? 
			getCurrentPages()[getCurrentPages().length - 1].options : 
			uni.getLaunchOptionsSync().query
		
		if (query) {
			if (query.id) {
				categoryId.value = Number(query.id)
			}
			if (query.name) {
				categoryName.value = decodeURIComponent(query.name)
			}
			
			loadFoodList()
		}
	})
	
	// 加载食物列表
	const loadFoodList = async () => {
		try {
			uni.showLoading({
				title: '加载中...'
			})
			
			const res = await getFoodByCategory({
				categoryId: categoryId.value,
				page: page.value,
				pageSize: pageSize.value
			})
			
			if (res.code === 0) {
				foodList.value = res.data.list
				hasMore.value = res.data.list.length < res.data.total
			} else {
				uni.showToast({
					title: res.message || '加载失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('加载食物列表失败:', e)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
	
	// 加载更多
	const loadMore = async () => {
		if (!hasMore.value) return
		
		try {
			page.value++
			
			uni.showLoading({
				title: '加载中...'
			})
			
			const res = await getFoodByCategory({
				categoryId: categoryId.value,
				page: page.value,
				pageSize: pageSize.value
			})
			
			if (res.code === 0) {
				foodList.value = [...foodList.value, ...res.data.list]
				hasMore.value = foodList.value.length < res.data.total
			} else {
				uni.showToast({
					title: res.message || '加载失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('加载更多失败:', e)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
	
	// 查看食物详情
	const viewFoodDetail = (food) => {
		uni.navigateTo({
			url: `/pages/diet/food-detail?id=${food.id}`
		})
	}
	
	// 添加食物
	const addFood = (food) => {
		uni.navigateTo({
			url: `/pages/diet/add?foodId=${food.id}&foodName=${encodeURIComponent(food.name)}`
		})
	}
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.category-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding-bottom: 30rpx;
		
		.category-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background-color: #fff;
			position: sticky;
			top: 0;
			z-index: 100;
			
			.back-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.icon-back {
					font-size: 36rpx;
					color: #333;
				}
			}
			
			.category-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.placeholder {
				width: 60rpx;
			}
		}
		
		.food-list {
			padding: 20rpx;
			
			.food-item {
				display: flex;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				
				.food-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
					background-color: #f9f9f9;
				}
				
				.food-info {
					flex: 1;
					
					.food-name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
					}
					
					.food-nutrition {
						display: flex;
						margin-bottom: 5rpx;
						
						.nutrition-item {
							font-size: 24rpx;
							color: #666;
							margin-right: 15rpx;
							
							&:last-child {
								margin-right: 0;
							}
						}
					}
				}
				
				.food-action {
					display: flex;
					align-items: center;
					
					.add-btn {
						width: 60rpx;
						height: 60rpx;
						background-color: #8cc9a1;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 32rpx;
					}
				}
			}
		}
		
		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 100rpx 0;
			
			.empty-image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 30rpx;
			}
			
			.empty-text {
				font-size: 32rpx;
				color: #333;
			}
		}
		
		.load-more {
			text-align: center;
			padding: 20rpx 0;
			font-size: 24rpx;
			color: #8cc9a1;
		}
	}
</style> 